<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<!-- 
		循环使用 v-for 指令。
		v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
		v-for 可以绑定数据到数组来渲染一个列表：
	-->
	<div id="app">
		<ol>
			<li v-for="site in sites">
			{{ site.name }}
			</li>
		</ol>
	</div>
	<!-- 模板中使用 v-for -->
	<div id="app2">
		<ul>
			<template v-for="site in sites">
				<li>{{ site.name }}</li>
				<li>--------------</li>
			</template>
		</ul>
	</div>
	<!-- v-for 可以通过一个对象的属性来迭代数据 -->
	<div id="app3">
		<ul>
			<li v-for="value in object">
			{{ value }}
			</li>
		</ul>
	</div>
	<!-- v-for 可以提供第二个的参数为键名 -->
	<div id="app4">
		<ul>
			<li v-for="(value, key) in object">
			{{ key }} : {{ value }}
			</li>
		</ul>
	</div>
	<!-- v-for 第三个参数为索引 -->
	<div id="app5">
		<ul>
			<li v-for="(value, key, index) in object">
			{{ index }}. {{ key }} : {{ value }}
			</li>
		</ul>
	</div>
	<!-- v-for 也可以循环整数 -->
	<div id="app6">
		<ul>
			<li v-for="n in 10">
			{{ n }}
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		var app6 = new Vue({
			el: '#app6'
		});
		var app5 = new Vue({
			el: '#app5',
			data: {
				object: {
					name: '菜鸟教程',
					url: 'http://www.runoob.com',
					slogan: '学的不仅是技术，更是梦想！'
				}
			}
		});
		var app4 = new Vue({
			el: '#app4',
			data: {
				object: {
					name: '菜鸟教程',
					url: 'http://www.runoob.com',
					slogan: '学的不仅是技术，更是梦想！'
				}
			}
		});
		var app3 = new Vue({
			el: '#app3',
			data: {
				object: {
					name: '菜鸟教程',
					url: 'http://www.runoob.com',
					slogan: '学的不仅是技术，更是梦想！'
				}
			}
		});
		var app2 = new Vue({
			el: '#app2',
			data: {
				sites: [
					{ name: 'Runoob' },
					{ name: 'Google' },
					{ name: 'Taobao' }
				]
			}
		}); 
		var app = new Vue({
			el: '#app',
			data: {
				sites: [
					{ name: 'Runoob' },
					{ name: 'Google' },
					{ name: 'Taobao' }
    			]
			}
		});
	</script>
</body>
</html>